<template>
	<view>
		<navtop title="播放记录"></navtop>
		<view class="body zt_qj bj_zhu">
		    <view v-if="!load" class="list">
		        <view v-for="(item,index) in list" :key="index" class="li" @click="get_play_url(item.id)">
		            <view class="img"><image :src="item.pic" mode="aspectFill"></image></view>
		            <view class="neirong">
		                <view class="name">{{item.name}}</view>
		                <view class="read">看到第{{item.xid}}集</view>
		                <view class="state">更新至第{{item.news_xid}}集</view>
		            </view>
		            <view class="btn">继续观看</view>
		        </view>
				<loading :type="1" :load="pageload" :nums="list.length"></loading>
				<view class="safearea-bottom"></view>
				<view class="safearea-bottom-fixed"></view>
		    </view>
			<loading :load="true" v-else></loading>
		</view>
	</view>
</template>

<script>
    let that = null,timer = null;
    export default {
        data() {
            return {
				load: true,
				page: 1,
				pageload: true,
                list:[]
            }
        },
        onLoad(e) {
            that = this;
			that.get_data();
        },
		onPullDownRefresh() {
			that.page = 1;
			that.get_data();
		},
		onReachBottom() {
		    //阻止重复加载
		    if(timer !== null) clearTimeout(timer);
			if(that.pageload){
				timer = setTimeout(function(){
					that.page++;
					that.get_data();
				},500);
			}
		},
        methods: {
			get_play_url(id){
				let url = 'play?id='+id;
				// #ifdef APP-PLUS
					url = 'aplay?id='+id;
				// #endif
				uni.navigateTo({
					url: '../'+url
				});
			},
			get_data(){
				that.http.get_curl('history/index',{page:that.page,size:20},function(res){
					uni.stopPullDownRefresh(); //停止下拉样式
					console.log('播放记录',res)
					that.load = false;
					if(res.code == 1){
						if(that.page == 1){
							that.list = res.data.list;
						}else{
							that.list = that.list.concat(res.data.list);
						}
						that.pageload = res.data.pageload;
					}
				});
			}
        }
    }
</script>

<style lang="scss" scoped>
    .list{width: 100%;
        .li{padding: 32rpx;position: relative;margin: 0 auto;margin-top: 10rpx;background: #fff;
            .img{width: 156rpx;height: 200rpx;border-radius: 16rpx;background: #f2f2f2;overflow: hidden;position: absolute;top: 32rpx;left: 32rpx;
                image{width: 100%;height: 100%;object-fit: cover;}
            }
            .neirong{padding-left: 176rpx;height: 200rpx;
                .name{font-size: 32rpx;font-weight: 600;color: #2e2f33;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
                .read{font-size: 28rpx;color: #f60;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-top: 32rpx;}
                .state{font-size: 28rpx;color: #999;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-top: 32rpx;}
            }
            .btn{width: 200rpx;height: 56rpx;background: linear-gradient(270deg, #fcae3a, #f15d25);color: #fff;text-align: center;line-height: 56rpx;border-radius: 56rpx;position: absolute;bottom: 32rpx;right: 32rpx;}
            .cancel{width: 200rpx;height: 56rpx;background: linear-gradient(270deg, #afafaf, #9f9f9f);color: #fff;text-align: center;line-height: 56rpx;border-radius: 56rpx;position: absolute;bottom: 100rpx;right: 32rpx;}
        }
        .li:nth-child(1){margin-top: 20rpx;}
    }
</style>